<template>
	<el-row :gutter="10" class="netContentRow" type="flex">
		<el-col :span="4" :xl="3" class="textNetBox" style="display: none">
			<div class="gradientBox">
				<p class="titleText">网络列表</p>
				<div class="showTextBtnBox">
					<i class="el-icon-s-grid" :class="{ showMode: showTextMode == 'icon' }"
						@click="showText('icon')"></i>
					<i class="el-icon-more" :class="{ showMode: showTextMode == 'text' }" @click="showText('text')"></i>
				</div>
				<v-TextNet @clickMonid="getClickMonid"></v-TextNet>
			</div>
		</el-col>
		<el-col :span="24" :xl="24" class="mainBox">
			<el-row :gutter="10" class="topRow">
				<el-col :span="6" class="topRow-lBox">
					<div class="gradientBox">
						<p class="titleText">基本信息</p>
						<v-NetBasicInformation></v-NetBasicInformation>
					</div>
				</el-col>
				<el-col :span="6" class="topRow-mBox">
					<div class="gradientBox">
						<p class="titleText">CPU负载</p>
						<v-CpuLoad></v-CpuLoad>
					</div>
					<div class="gradientBox">
						<p class="titleText">内存负载</p>
						<v-MemoryLoad></v-MemoryLoad>
					</div>
					<!-- <div class="gradientBox">
                        <p class="titleText">端口状态</p>
                        <v-PortStatus></v-PortStatus>
                    </div> -->
				</el-col>
				<!-- snmp连接 -->
				<template v-if="this.linkType === 'SNMP' ">
					<el-col :span="12" class="topRow-rBox">
						<div class="gradientBox">
							<p class="titleText">端口流量TOP</p>
							<v-PortFlux></v-PortFlux>
						</div>
					</el-col>
				</template>
				<!-- ssh连接 -->
				<template v-else>
					<el-col :span="12" class="topRow-rBox">
						<div class="gradientBox">
							<p class="titleText">端口详情</p>
							<v-PortFluxForSSH></v-PortFluxForSSH>
						</div>
					</el-col>
				</template>
			</el-row>
			<el-row :gutter="0" class="bottomRow">
				<el-col :span="24">
					<div class="gradientBox">
						<p class="titleText">告警日志</p>
						<v-NetAlarmLog></v-NetAlarmLog>
					</div>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import vTextNet from "./TextNet.vue";
	import vNetBasicInformation from "./NetBasicInformation.vue";
	import vCpuLoad from "./CpuLoad.vue";
	import vMemoryLoad from "./MemoryLoad.vue";
	import vPortStatus from "./PortStatus.vue";
	import vPortFlux from "./PortFlux.vue";
	import vPortFluxForSSH from "./PortFluxForSSH.vue";
	import vNetAlarmLog from "./NetAlarmLog.vue";
	import {
		GetItem
	} from "@/utils/dataStore";

	export default {
		name: "netPage",
		components: {
			vTextNet,
			vNetBasicInformation,
			vCpuLoad,
			vMemoryLoad,
			vPortStatus,
			vPortFlux,
			vNetAlarmLog,
			vPortFluxForSSH,
		},
		beforeRouteEnter(to, from, next) {
			// if (from.path != "/NodeUsability") {
			//   next("/NodeUsability");
			// }
			next();
		},
		data() {
			return {
				postData: {
					opera: "dbConnect",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				ipData: [],
				selectIPVisible: false,
				selectedMonID: "",
				showTextMode: "icon",
				linkType: "",
			};
		},
		created() {
			console.log("11111")
			GetItem(sessionStorage.getItem("PushId")).then((_) => {
				this.linkType = _[0].articleAddress.connType ? (_[0].articleAddress.connType == 'snmp' ? 'SNMP' :
					'SSH') : 'SNMP'
			});
		},
		methods: {
			selectIP() {
				// console.log('HID',this.selectedMonID)
				fetchData({
					postData: JSON.stringify(this.postData),
				}).then((res) => {
					console.log(123, res)
					this.ipData = res;
				});

				this.selectIPVisible = true;
			},
			submitBtn() {
				bus.$emit("selectedMonID", this.selectedMonID);
			},
			clearData(name) {
				this.selectedMonID = "";
				this.ipData = [];
			},
			getClickMonid(val) {
				this.selectedMonID = val;
			},
			showText(val) {
				switch (val) {
					case "icon":
						this.showTextMode = "icon";
						bus.$emit("showText", "icon");
						break;
					case "text":
						this.showTextMode = "text";
						bus.$emit("showText", "text");
						break;

					default:
						break;
				}
			},
		},
		beforeDestroy() {},
	};
</script>

<style scoped>
	.netContentRow {
		height: 100%;
		min-height: 896px;
		overflow-y: scroll;
		color: aliceblue;
	}

	.mainBox .topRow {
		height: 70%;
		margin-bottom: 10px;
	}

	.mainBox .bottomRow {
		height: calc(20% - 10px);
	}

	.gradientBox {
		position: relative;
		padding: 7px 10px;
		margin-bottom: 10px;
		overflow: hidden;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0px 0px 24px rgb(1, 40, 107) inset !important;
	}

	.gradientBox:last-child {
		margin-bottom: 0;
	}

	.titleText {
		width: 60%;
		margin: 0 auto 8px auto;
		border-radius: 20px;
		box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
		line-height: 22px;
	}

	.showTextBtnBox {
		position: absolute;
		top: 10px;
		right: 0;
		padding-right: 3px;
	}

	.showTextBtnBox i {
		margin-right: 3px;
		cursor: pointer;
	}

	.showTextBtnBox i.showMode {
		color: #67c23a;
	}

	/* 网络列表 */
	.textNetBox .gradientBox {
		max-height: calc(100% - 7px * 2);
	}

	/* 右上 */
	.topRow>div {
		height: 100%;
	}

	/* .topRow-lBox .gradientBox {
    height: calc(100% / 2 - 7px * 2 - 10px / 2);
} */
	.topRow-lBox .gradientBox {
		height: calc(100% - 7px * 2);
	}

	.topRow-mBox .gradientBox {
		height: calc(100% / 2 - 7px * 2 - 20px / 2);
	}

	.topRow-rBox .gradientBox {
		height: calc(100% - 7px * 2);
	}

	/* 右下告警日志 */
	.bottomRow>div {
		height: 100%;
	}

	.bottomRow .gradientBox {
		height: calc(100% - 7px * 2);
	}
</style>
